<template>
	<view class="wrap">
		<js-error mode="bottom" ref="jsError"></js-error>
		<view class="cu-bar search" style="padding: 10px" ref="cu-bar">
			<u-search v-model="barCode" ref="uSearch" :focus="focus" placeholder="请先聚焦后扫描机台" :show-action="false"
				@search="confirmSearch" height="74"></u-search>
			<view style="margin-left: 10px; display: flex; flex-direction: column">
				<u-icon @click="search" name="scan" size="60"></u-icon>
			</view>
		</view>
		<view v-show="currentRW">
			<scroll-view
			  scroll-y="true"
			  :style="{ height: computedScrollViewHeight }"
			>
			<!-- style="margin: 20px 0" -->
				<view class="margin-sm" >
					<u-section
					  title="投料登记"
					  
					  :right="false"
					  line-color="blue"
					  font-size="30"
					></u-section>
					<view class="wrap">
						<u-form class="form" ref="uForm" label-position="left" :model="model" :rules="rules">
							<u-form-item label="订单号" prop="id" label-width="180" style="font-weight: 800;">
								<view>1000000050#01</view>
							</u-form-item>
							<u-form-item label="机台" prop="id" label-width="180">
								<view></view>
							</u-form-item>
							<u-form-item label="工序编码" prop="id" label-width="180">
								<view>ZS</view>
							</u-form-item>
							<u-form-item label="工序名称" prop="id" label-width="180">
								<view>注塑</view>
							</u-form-item>
							<u-form-item label="存货编码" prop="id" label-width="180">
								<view>01.A003.05.0001</view>
							</u-form-item>
							<u-form-item label="异常类型" prop="error_type" label-width="180" style="color: red;font-weight: 800;" :required="true">
								<js-select v-model="model.error_type" dict-type="mes_error_type" placeholder="请选择选项"></js-select>
							</u-form-item>
							<u-form-item label="异常描述" prop="remarks" label-width="180" style="color: red;font-weight: 800;" :required="true"  label-position="top">
								<u-input placeholder="请输入" v-model="model.remarks" type="textarea" :custom-style="customStyle"  height="100" maxlength="500"></u-input>
							</u-form-item>
							<u-form-item label="上报人" prop="create_by_name" label-width="180" style="color: red;font-weight: 800;" :required="true">
								<u-input placeholder="请扫码" v-model="model.create_by_name" type="text" maxlength="64" :custom-style="customStyle"></u-input><u-icon @click="searchOperator" name="scan" size="50"></u-icon>
							</u-form-item>
							<u-form-item label="发生时间" prop="create_date" label-width="180" style="color: red;font-weight: 800;"  :required="true">
								<picker class="flex-sub"
								  mode="date"
								  :value="model.create_date"
								  @change="DateChange('create_date',$event)"
								>
								  <view class="picker">
								    {{ model.create_date ? model.create_date : '请选择' }}
								  </view>
								</picker>
							</u-form-item>
							<u-form-item label="处理时间" prop="deal_date" label-width="180">
								<picker
								  class="flex-sub"
								  mode="date"
								  :value="model.deal_date"
								  @change="DateChange('deal_date',$event)"
								>
								  <view class="picker">
								    {{ model.deal_date ? model.deal_date : '请选择' }}
								  </view>
								</picker>
							</u-form-item>
							<u-form-item label="处理人" prop="deal_user_name" label-width="180">
								<u-input placeholder="请扫码" v-model="model.deal_user_name" type="text" maxlength="64"></u-input><u-icon @click="searchOperator" name="scan" size="50"></u-icon>
							</u-form-item>
							<u-form-item label="状态" prop="status" label-width="180" >
								<js-select v-model="model.status" dict-type="mes_error_status" placeholder="请选择选项"></js-select>
							</u-form-item>
							
						</u-form>
						
						
						<!-- <view class="cu-item shadow">
							<view class="cu-form-group text-xl text-bold">
								<view class="title">订单行号</view>
								<view class="flex-sub">1000000050#01</view>
							</view>
							<view class="cu-form-group">
								<view class="title">机台</view>
								<view class="flex-sub"></view>
							</view>
							<view class="cu-form-group">
								<view class="title">工序编码</view>
								<view class="flex-sub">ZS</view>
							</view>
							<view class="cu-form-group">
								<view class="title">工序名称</view>
								<view class="flex-sub">注塑</view>
							</view>
							<view class="cu-form-group">
								<view class="title">存货编码</view>
								<view class="flex-sub">01.A003.05.0001</view>
							</view>
							<view class="cu-form-group">
								<view class="title">加工数量</view>
								<view class="flex-sub">100</view>
							</view>
							<view class="cu-form-group">
								<view class="title">计件单价</view>
								<view class="flex-sub">12.00</view>
							</view>
							<view class="cu-form-group">
								<view class="title">报工人</view>
								<view class="flex-sub">system</view>
							</view>
							<view class="cu-form-group">
								<view class="title">操作工</view>
								<view class="flex-sub">网三</view>
							</view>
						</view> -->
					</view>
					
				</view>
			</scroll-view>
			<view class="btn-group cu-bar foot padding" ref="btn-group">
				<!-- round -->
				<button class="cu-btn  bg-confirm lg margin-left " @click="confirm">确定</button>		
			</view>
		</view>
		<u-empty v-if="!currentRW" :style="{height: emptyViewHeight+'px'}"></u-empty>	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus:true,
				barCode:'',
				model: {
					iqty:10,
					operator:'网三'
				},
				rules: {
					iqty: [
						{
							required: true,
							message: '请输入投料数量',
							trigger: ['change','blur'],
						}
					],
					create_by_name: [
						{
							required: true,
							message: '请扫码投料人',
							trigger: ['change','blur'],
						}
					],
					create_date:[
						{
							required: true,
							message: '请选择投料时间',
							trigger: ['change','blur'],
						}
					]
				},
				customStyle:{
					color:'red'
				},
				scrollViewHeight: 0,
				currentRW:false,
				emptyViewHeight:0
			}
		},
		mounted() {
			this.calculateScrollViewHeight()
			this.emptyHeight()
		},
		computed: {
		  computedScrollViewHeight() {
		    return this.scrollViewHeight === 'auto' ? 'auto' : `${this.scrollViewHeight}px`;
		  },
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			async calculateScrollViewHeight() {
			  try {
			// 等待头部高度计算完成
			      
			      // 计算btn-group 高度
			      // 获取屏幕高度
			      const systemInfo = uni.getSystemInfoSync();
			      const screenHeight = systemInfo.windowHeight;
				  const btnOffsetHeight = this.$refs['btn-group'].$el.offsetHeight;
				  const cuBarOffsetHeight = this.$refs['cu-bar'].$el.offsetHeight;
				  console.log(screenHeight,btnOffsetHeight,cuBarOffsetHeight,'===')
			      // 计算scroll-view高度
			      this.scrollViewHeight = screenHeight - ( btnOffsetHeight + cuBarOffsetHeight + 60 );
			  } catch (error) {
			    console.error('Error while calculating ScrollView height:', error);
			  }
			},
			async emptyHeight() {
			  try {
			// 等待头部高度计算完成
			      
			      // 计算btn-group 高度
			      // 获取屏幕高度
			      const systemInfo = uni.getSystemInfoSync();
			      const screenHeight = systemInfo.windowHeight;
				  const cuBarOffsetHeight = this.$refs['cu-bar'].$el.offsetHeight;
			      // 计算scroll-view高度
			      this.emptyViewHeight = screenHeight - cuBarOffsetHeight;
			  } catch (error) {
			    console.error('Error while calculating ScrollView height:', error);
			  }
			},
			confirmSearch(){
				if(this.barCode){
					this.currentRW = true;
				}
			},
			search(){
				var _that = this;
				_that.focus = false
				uni.scanCode({
					scanType: ["barCode", "qrCode"],
					// onlyFromCamera: true,
					success: function(res) {
						_that.barCode = res.result;
					},
				});
			},
			searchOperator(){
				var _that = this;
				_that.focus = false
				uni.scanCode({
					scanType: ["barCode", "qrCode"],
					// onlyFromCamera: true,
					success: function(res) {
						_that.model.operator = res.result;
					},
				});				
			},
			DateChange(date,e) {
			  this.model[date] = e.detail.value;
			  this.$forceUpdate();
			},
			confirm(){
				console.log(this.model,'model===')
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(valid,'valid')
					} else {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
					}
				});
			}
		}
	}	
</script>

<style scoped lang="scss">
	.title{
		width: 180rpx;
	}
	.bg-confirm {
	  background: #3e97b0;
	  color: #ffffff;
	}
	.cu-bar.foot{
		z-index: 998 !important;
	}
	/deep/.u-drawer-content{
		height: 40% !important;
	}
</style>